import { normFile, normFileGetVal } from '@/components/BuildForm';
import { CONFIG } from '@/constants';
import { getOrderDetail, saveRefund } from '@/servers/api/order';
import { PlusOutlined } from '@ant-design/icons';
import { FormattedMessage, history, useIntl, useLocation } from '@umijs/max';
import { Button, Form, Input, Select, Upload, message } from 'antd';
import { useEffect, useState } from 'react';
type IParams = {
    order_id: number;
};
const AfterSale: React.FC = () => {
    const intl = useIntl();
    const location = useLocation();
    const state = location.state as IParams;
    const [order_info, setorder_info] = useState();
    const { TextArea } = Input;

    function onFinish(e) {
        saveRefund({
            order_id: state.order_id,
            ...e,
        })
            .then(() => {
                message.success(
                    intl.formatMessage({ id: '提交成功，请等待后台审核' }),
                );
                history.push('/order');
            })
            .catch((err) => {
                message.error(err.msg);
            });
    }
    function getOrderDetailFun() {
        getOrderDetail({
            id: state.order_id,
        }).then((res) => {
            setorder_info(res.data.orderInfo);
        });
    }
    const selector = [
        {
            cateName: '10%',
            refund: '0.1',
        },
        {
            cateName: '20%',
            refund: '0.2',
        },
        {
            cateName: '30%',
            refund: '0.3',
        },
        {
            cateName: '40%',
            refund: '0.4',
        },
        {
            cateName: '50%',
            refund: '0.5',
        },
        {
            cateName: '60%',
            refund: '0.6',
        },
        {
            cateName: '70%',
            refund: '0.7',
        },
        {
            cateName: '80%',
            refund: '0.8',
        },
        {
            cateName: '90%',
            refund: '0.9',
        },
        {
            cateName: '100%',
            refund: '1',
        },
    ];
    const uploadButton = (
        <button style={{ border: 0, background: 'none' }} type="button">
            <PlusOutlined />
            <div style={{ marginTop: 8 }}>Upload</div>
        </button>
    );
    const beforeUpload = (file: any) => {
        const isJpgOrPng =
            file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('You can only upload JPG/PNG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }
        return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
    };
    useEffect(() => {
        getOrderDetailFun();
    }, []);
    return (
        <>
            <Form
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                autoComplete="off"
            >
                <Form.Item label={intl.formatMessage({ id: '订单编号' })}>
                    {order_info?.order_no}
                </Form.Item>
                <Form.Item label={intl.formatMessage({ id: '类型' })}>
                    {order_info?.type}
                </Form.Item>
                <Form.Item label={intl.formatMessage({ id: '内容' })}>
                    {order_info &&
                        order_info[
                            intl.formatMessage({ id: 'item.show_text' })
                        ]}
                </Form.Item>
                <Form.Item
                    label={intl.formatMessage({ id: '补偿比例' })}
                    name="refund"
                    rules={[{ required: true }]}
                >
                    <Select
                        options={selector}
                        fieldNames={{ label: 'cateName', value: 'refund' }}
                    />
                </Form.Item>
                <Form.Item
                    label={intl.formatMessage({ id: '申请说明' })}
                    name="content"
                    rules={[{ required: true }]}
                >
                    <TextArea rows={4} />
                </Form.Item>
                <Form.Item
                    label={intl.formatMessage({ id: '上传图片' })}
                    rules={[{ required: true }]}
                    name="images"
                    valuePropName="fileList"
                    getValueFromEvent={normFile}
                    getValueProps={normFileGetVal}
                >
                    <Upload
                        listType="picture-card"
                        maxCount={6}
                        beforeUpload={beforeUpload}
                        action={CONFIG.HTTP_REQUEST_URL + '/common/upload'}
                    >
                        {uploadButton}
                    </Upload>
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        <FormattedMessage id="提交申请"></FormattedMessage>
                    </Button>
                </Form.Item>
            </Form>
        </>
    );
};
export default AfterSale;
